<template>

  <div>

    <!--搜索框部分-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="计划名称">
          <el-input placeholder="请输入计划名称" v-model.trim="searchPlanParam.name" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="计划类型">
          <el-select v-model="searchPlanParam.type" placeholder="请选择计划类型" clearable>
            <el-option label="固定任务" :value="10"></el-option>
            <el-option label="固定任务(精确到秒)" :value="11"></el-option>
            <el-option label="循环任务(年)" :value="20"></el-option>
            <el-option label="循环任务(月)" :value="21"></el-option>
            <el-option label="循环任务(天)" :value="22"></el-option>
            <el-option label="循环任务(小时)" :value="23"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="重要性">
          <el-select v-model="searchPlanParam.importance" placeholder="请选择计划重要性" clearable>
            <el-option label="核心级" :value="0"></el-option>
            <el-option label="重要紧急" :value="1"></el-option>
            <el-option label="不重要但紧急" :value="2"></el-option>
            <el-option label="重要但不紧急" :value="3"></el-option>
            <el-option label="不重要不紧急" :value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="计划详情">
          <el-input placeholder="请输入计划详情" v-model.trim="searchPlanParam.details" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="计划分类" prop="classify" >
          <el-select v-model="searchPlanParam.classify" placeholder="请选择计划分类" clearable>
            <el-option label="个人" :value="1"></el-option>
            <el-option label="家庭" :value="2"></el-option>
            <el-option label="工作" :value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="完成情况">
          <el-select v-model="searchPlanParam.finish" placeholder="请选择完成情况" clearable>
            <el-option label="未完成" :value="10"></el-option>
            <el-option label="超时逾期-未完成" :value="11"></el-option>
            <el-option label="任务完成" :value="20"></el-option>
            <el-option label="逾期已完成" :value="21"></el-option>
            <el-option label="任务停止" :value="90"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="getTaskAllBefore">查询</el-button>
          <el-button type="warning" size="mini" @click="resetQueryPlan">重置</el-button>
          <el-button type="warning" size="mini" @click="toPlanSave">新增</el-button>
        </el-form-item>

      </el-form>

    </el-card>


    <!--列表-->
    <el-card class="div-list-style">

      <el-table
        :data="planTableData"
        max-height="600px"
        height="600px"
        style="width: 100%">

        <el-table-column
          prop="name"
          label="计划名称"
        >
        </el-table-column>

        <el-table-column
          prop="details"
          label="详情"
        >
        </el-table-column>

        <el-table-column
          prop="type"
          label="计划类型"
        >
          <template slot-scope="scope">
            <el-tag type="warning" size="mini" v-if="scope.row.type === 10">固定任务</el-tag>
            <el-tag type="warning" size="mini" v-else-if="scope.row.type === 11">固定任务(精确到秒)</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.type === 20">循环任务(年)</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.type === 21">循环任务(月)</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.type === 22">循环任务(天)</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.type === 23">循循环任务(小时)</el-tag>
            <el-tag type="info" size="mini" v-else >-</el-tag>
          </template>
        </el-table-column>


        <el-table-column
          prop="importance"
          label="重要性"
        >
          <template slot-scope="scope">
            <el-tag type="danger" size="mini" v-if="scope.row.importance === 0">核心</el-tag>
            <el-tag type="warning" size="mini" v-else-if="scope.row.importance === 1">重要紧急</el-tag>
            <el-tag size="mini" v-else-if="scope.row.importance === 2">不重要但紧急</el-tag>
            <el-tag size="mini" v-else-if="scope.row.importance === 3">重要但不紧急</el-tag>
            <el-tag type="info" size="mini" v-else >不重要不紧急</el-tag>
          </template>
        </el-table-column>

        <!--<el-table-column-->
        <!--  prop="startTime"-->
        <!--  label="开始时间"-->
        <!--&gt;-->
        <!--</el-table-column>-->

        <!--<el-table-column-->
        <!--  prop="executeLastTime"-->
        <!--  label="最近一次执行"-->
        <!--&gt;-->
        <!--</el-table-column>-->

        <el-table-column
          prop="classify"
          label="分类"
        >
          <template slot-scope="scope">
            <el-tag type="danger" size="mini" v-if="scope.row.classify === 1">个人</el-tag>
            <el-tag type="warning" size="mini" v-else-if="scope.row.classify === 2">家庭</el-tag>
            <el-tag size="mini" v-else-if="scope.row.classify === 3">工作</el-tag>
            <el-tag type="info" size="mini" v-else >-</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="cycle"
          label="周期"
        >
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.type === 10">{{scope.row.cycle}} / 次</el-tag>
            <el-tag size="mini" v-else-if="scope.row.type === 11">{{scope.row.cycle}} / 次</el-tag>
            <el-tag size="mini" v-else-if="scope.row.type === 20">{{scope.row.cycle}} 年 / 次</el-tag>
            <el-tag size="mini" v-else-if="scope.row.type === 21">{{scope.row.cycle}} 月 / 次</el-tag>
            <el-tag size="mini" v-else-if="scope.row.type === 22">{{scope.row.cycle}} 天 / 次</el-tag>
            <el-tag size="mini" v-else-if="scope.row.type === 23">{{scope.row.cycle}} 小时 / 次</el-tag>
            <el-tag size="mini" v-else >-</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="advance"
          label="提前提醒"
        >
          <template slot-scope="scope">
            <span>{{scope.row.advance}} / 天</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="finish"
          label="是否完成"
        >
          <template slot-scope="scope">
            <el-tag type="info" size="mini" v-if="scope.row.finish === 10">未完成</el-tag>
            <el-tag type="warning" size="mini" v-else-if="scope.row.finish === 11">未完成逾期</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.finish === 12">进行中</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.finish === 20">任务完成</el-tag>
            <el-tag  size="mini" v-else-if="scope.row.finish === 21">已完成逾期</el-tag>
            <el-tag type="danger" size="mini" v-else >任务停止</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="toPlanDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>
            <el-button @click="toOpenHistory(scope.row)" type="text" size="small"><i class="el-icon-view"></i>执行记录</el-button>
            <!--<el-button @click="planComplete(scope.row)" type="text" size="small"><i class="el-icon-check"></i>完成一次计划</el-button>-->
            <el-button @click="stopPlanTips(scope.row)" type="text" size="small"><i class="el-icon-stopwatch"></i>终止计划</el-button>
            <el-button @click="delPlanByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除计划</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--分页部分-->
      <el-pagination
        style="width:33%; margin-right:10px; margin-top:10px;"
        background
        layout="total, prev, pager, next, jumper"
        @current-change="planPageCurrentChange"
        :page-size="pageConfig.size"
        :current-page="pageConfig.current"
        :pager-count="5"
        :total="pageConfig.total">
      </el-pagination>

      <!--执行记录-->
      <PlanHistory ref="PlanHistoryRef"/>
      <PlanDetailed ref="PlanDetailedRef"/>
    </el-card>

  </div>

</template>

<script>

  import http from '@/utils/http'
  import PlanHistory from "./PlanHistory";
  import PlanDetailed from "./PlanDetailed";

  export default {
    name: "PlanList",
    components: {
      PlanHistory,
      PlanDetailed,
    },
    data(){
      return {
        // 查询计划参数
        searchPlanParam: {
          name: null,
          type: null,
          importance: null,
          details: null,
          classify: null,
          finish: null,
        },
        // 分页参数
        pageConfig: {
          // 每页记录数
          size: 30,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
        // 表格中的数据
        planTableData: [],
      }
    },
    methods: {
      /**
       * 分页被改变的时候
       * @param value 当前页
       */
      planPageCurrentChange(value){
        this.pageConfig.current = value
        this.getTaskAll()
      },
      /**
       * 重置查询
       */
      resetQueryPlan(){
        this.searchPlanParam = {
          name: null,
          type: null,
          importance: null,
          details: null,
          classify: null,
          finish: null,
        }
      },
      /**
       * 终止计划 提示
       */
      stopPlanTips(row){
        this.$confirm('是否终止该计划?', '提示', {
          confirmButtonText: '确定终止',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.stopPlan(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 终止计划
       */
      stopPlan(row){
        http.post("/plan/stopPlan", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getTaskAll()
          this.$message.success("终止计划成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 删除前的提示
       * @param row 当前行数据
       */
      delPlanByIdTips(row){
        this.$confirm('是否删除该计划?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delPlanById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 根据计划ID删除计划以及执行历史记录
       * @param row 当前行数据
       */
      delPlanById(row){
        http.post("/plan/delPlanById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getTaskAll()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 跳转到计划新增
       */
      toPlanSave(){
        this.$router.push({path: '/toPlanSaveUpd'})
      },
      /**
       * 打开历史记录信息
       * @param row 当前行数据
       */
      toOpenHistory(row){
        this.$refs.PlanHistoryRef.openPlanHistoryPage(row.id)
      },
      /**
       * 打开详情页面
       * @param row
       */
      toPlanDetailed(row){
        this.$refs.PlanDetailedRef.openPlanDetailedPage(row)
      },
      /**
       * 查询前重置分页
       */
      getTaskAllBefore(){
        this.pageConfig.current = 1
        this.getTaskAll()
      },
      /**
       * 全部任务查询分页
       */
      getTaskAll(){
        this.searchPlanParam.current = this.pageConfig.current
        this.searchPlanParam.size = this.pageConfig.size

        http.post("/plan/getTaskAll", this.searchPlanParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.pageConfig.total = data.total;
          this.pageConfig.current = data.current;
          this.pageConfig.size = data.size;
          // 处理数据
          this.planTableData = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getTaskAll()
    }
  }
</script>

<style scoped>

  .div-list-style {
    margin-top: 10px;
  }

</style>

